<template>
  <view class="update_container">
    <view class="content-top">
      <view class="content-top-container flex-column align-start">
        <text class="title">发现新版本</text>
        <text class="version">v{{ version }}</text>
      </view>
      <image class="content-top-bg" src="/static/bg/update_bg_top.png"></image>
    </view>
    <scroll-view class="content" scroll-y>
      <rich-text :nodes="_content"></rich-text>
    </scroll-view>
    <view class="content-button">
      <u-button v-if="platform === 'ios' && fileType === 'apk'" type="primary" @click="toAppStore">
        前往AppStore进行安装
      </u-button>
      <u-button v-else-if="!updating && !downloadFinished" type="primary" @click="update">立即升级</u-button>
      <view v-else-if="updating" class="updating-content">
        <u-line-progress :percent="updateProgress" striped striped-active></u-line-progress>
        <view class="progress-text flex-space-between">
          <text>{{ curFileSize && fileTotalSize ? '下载中，请稍后...' : '等待中...' }}</text>
          <text v-if="curFileSize && fileTotalSize">({{ curFileSize }} / {{ fileTotalSize }})</text>
        </view>
      </view>
      <u-button v-else-if="downloadFinished" type="primary" @click="handleInstall">
        {{ fileType === 'apk' ? '下载完成，立即安装' : '重启更新' }}
      </u-button>
    </view>
    <image v-if="!forceUpdate" class="close-image" src="/static/close_fill.png" @click="close" />
  </view>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
import { toAppStore, checkIsDownLoad, downLoadApkFile, install } from './index'

interface Data {
  forceUpdate: boolean
  content?: string
  fileUrl: string
  version: string
}

interface Props {
  data: Data
}

const props = defineProps<Props>()
const { content, fileUrl, forceUpdate, version } = props.data
const _content = computed(() => (content ? content.replace(/\n/g, '<br>') : '修复已知问题'))

// 升级APP
const platform = uni.getSystemInfoSync().platform
const fileType = computed(() => (fileUrl ? fileUrl.substring(fileUrl.lastIndexOf('.') + 1) : ''))
const updating = ref<boolean>(false)
const updateProgress = ref<number>(0)
const downloadFinished = ref<boolean>(false)
const fileTotalSize = ref<string>('')
const curFileSize = ref<string>('')
checkIsDownLoad(version).then(() => {
  downloadFinished.value = true
})
const update = () => {
  if (['apk', 'wgt'].includes(fileType.value)) {
    updating.value = true
    downLoadApkFile(fileUrl, version, fileTotalSize, curFileSize, updateProgress)
      .then(res => {
        console.log(res)
        downloadFinished.value = true
      })
      .catch(err => {
        uni.showToast({
          title: '安装包下载失败，原因：' + err,
          icon: 'none'
        })
        console.log('安装包下载失败，原因：' + err)
      })
      .finally(() => {
        updating.value = false
      })
  } else {
    plus.runtime.openURL(fileUrl)
  }
}
const handleInstall = () => {
  install(fileType.value as 'apk' | 'wgt').catch(() => {
    downloadFinished.value = false
    update()
  })
}

const emit = defineEmits(['close'])
const close = () => {
  emit('close')
}
</script>

<style lang="scss" scoped>
.update_container {
  background-color: #fff;
  width: 600rpx;
  border-bottom-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
  position: relative;
  .content-top {
    width: 600rpx;
    height: 180rpx;
    position: relative;
    .content-top-container {
      position: absolute;
      z-index: 5;
      color: #fff;
      left: 40rpx;
      top: 0;
      .title {
        font-weight: bold;
        font-size: 38rpx;
        letter-spacing: 2rpx;
      }
      .version {
        color: rgb(26, 152, 251);
        background: #fff !important;
        font-size: 24rpx;
        padding: 0 12rpx;
        height: 40rpx;
        line-height: 40rpx;
        border-radius: 20rpx;
        margin-top: 12rpx;
      }
    }
    .content-top-bg {
      position: absolute;
      left: 0;
      top: -95rpx;
      width: 600rpx;
      height: 270rpx;
      z-index: 1;
    }
  }
  .content {
    height: 200rpx;
    padding: 0 40rpx;
    font-size: 26rpx;
    color: #585858;
    box-sizing: border-box;
    line-height: 40rpx;
  }
  .content-button {
    padding: 30rpx;
    height: 80rpx;
    box-sizing: content-box;
    .updating-content {
      height: 80rpx;
      .progress-text {
        margin-top: 14rpx;
        font-size: 24rpx;
      }
    }
  }
  .close-image {
    width: 80rpx;
    height: 80rpx;
    position: absolute;
    left: 50%;
    bottom: -100rpx;
    transform: translateX(-50%);
  }
}
</style>
